<template>
  <div class="real-security">
    <div class="title"></div>
    <div class="main">
      <div class="echarts">
        <ProgressChart
            type="green"
            :echartsData="89"
            :color="['rgba(171, 228, 213, 1)', 'rgba(0, 210, 156, 1)']"
            :borderColor="['rgba(28, 81, 74, 1)', 'rgba(28, 81, 74, 0.1)']"
        />
      </div>
      <div class="level">
        <ul class="level-box">
          <li>安全：85-100分</li>
          <li>危险：76-84分</li>
          <li>高危：60-75分</li>
          <li>极度危险：0-59分</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import ProgressChart from '@/components/echarts/progressChart.vue';

defineComponent({ name: 'RealSecurity' });
</script>

<style scoped lang="scss">
.real-security {
  @apply w-full h-full;

  .title {
    @apply w-full h-[31px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-[265px] flex;

    .echarts {
      @apply w-1/2 h-full;
    }

    .level {
      @apply w-1/2 h-full flex justify-center items-center;

      .level-box {
        @apply w-[168px] h-[156px] flex flex-col justify-evenly text-[14px] bg-[#294b6b] rounded-[4px];

        li {
          @apply relative pl-[30px];
          font-family: Alibaba PuHuiTi;

          &:before {
            content: '';
            @apply absolute top-1/2 left-[10px] -translate-y-1/2 w-[10px] h-[10px] rounded-[5px];
          }

          &:first-child:before {
            background: linear-gradient(0deg, #024825 0%, #0dba4e 100%);
          }

          &:nth-child(2):before {
            background: linear-gradient(0deg, #773f00 0%, #e7c800 100%);
          }

          &:nth-child(3):before {
            background: linear-gradient(0deg, #882904 0%, #ff9a52 100%);
          }

          &:last-child:before {
            background: linear-gradient(0deg, #920404 0%, #fd6767 100%);
          }
        }
      }
    }
  }
}
</style>
